// 1.下载vue-router@3包
//2.引入vue-router包
import VueRouter from "vue-router";
import Vue from "vue";

//路由懒加载
//结合Vue的异步组件和webpack的代码分割功能来实现的
//不再使用import模板化语法引入路由组件
// 而是定义一个当前组件对应的函数,函数内部异步使用import方法引入组件,并返回promise实例即可
//当路由被切换需要加载当前路由时,就会调用当前函数
const Login = ()=>import("@/pages/Login")
const Home = ()=>import("@/pages/Home")
const NotFound = ()=>import("@/pages/NotFound")
const Movie = ()=>import("@/pages/Home/Movie")
const Music = ()=>import("@/pages/Home/Music")

//3.安装VurRouter插件
Vue.use(VueRouter)

//4.实例化VueRouter
const router = new VueRouter({
    mode:'history',
    routes:[
        {
            path:'/',
            redirect:'/home',
            name:'Home'
        },
        {
            path:'/home',
            component:Home,
            //方案三，在父级直接重定向
            redirect:'/home/movie',
            children:[
                {
                    path:'movie',
                    component:Movie,
                    name:'Movie'
                },
                {
                    path:'music',
                    component:Music,
                    name:'Music',
                    children:[
                        {
                            path:'musicDetail/:id/:age?',
                            name:'MusicDetail',
                            component:()=>import('@/pages/Home/Music/MusicDetail')
                        }
                    ]
                },
            //    重定向:方案一：推荐
            //     {
            //         path:'',
            //         redirect:'movie'
            //     },
            //    方案二
            //     {
            //         path:'',
            //         component:Movie
            //     }
            ]
        },
        {
            path:'/login',
            component:Login,
            name:'Login'
        },
        //404
        {
            path:'/*',
            component:NotFound
        }
    ]
})

//5.导出路由器
export default router